import React, { Component } from 'react';
import '../css/Activity.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import axios from  'axios'
import  Dibu from  './dibu'
@observer class Activity extends Component {
    constructor(props) {
        super(props)
        this.state={
            style:'全部',
            size:0,
            total:0,
            Zixun:[],
            interval:'',
            intervaling:''
        }
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/pc/activity/getList.jhtml?activityCategoryName='+this.props.match.params.type+'&pageNumber=1&pageSize=4&status=all')
            .then((item)=>{
                this.setState({
                    Zixun:item.data.data.content,
                    size:item.data.data.pageNumber,
                    total:item.data.data.totalPages,
                    style:this.props.match.params.type
                },()=>{
                    if(this.state.total>this.state.size){
                        this.interval()
                    }
                })
            })
    }
    interval(){
        if(this.state.total<=this.state.size){
            alert('已到底部')
        }else{
            this.intervaling=setInterval(()=>{
                if(document.body.scrollHeight-(document.documentElement.scrollTop||document.body.scrollTop)<700){
                  clearInterval(this.intervaling)
                    this.setState({
                        size:this.state.size+1
                    },()=>{
                        this.loading();
                    })
                }
            },1000)
        }
    }
    loading(){
        axios.get('http://www.niuduxiu.com/pc/activity/getList.jhtml?activityCategoryName='+this.state.style+'&pageNumber='+this.state.size+'&pageSize=4&status=all')
            .then((item)=>{
                this.setState({
                    Zixun:this.state.Zixun.concat(item.data.data.content),
                    size:item.data.data.pageNumber,
                    total:item.data.data.totalPages
                },()=>{
                    if(this.state.total>this.state.size){
                        this.interval()
                    }
                })
            })
    }
    getActivity(item){
        if(item===this.state.style){
            return false;
        }else{
           window.open('/Activity/'+item,'_self')
        }
    }
    render() {
        return (
            <div className="Activity">
                <div className='ActivityHeader'>
                    <div>
                        <p>牛犊秀活动</p>
                        <p>最符合大学生的活动，全在这里</p>
                    </div>
                    <img src="http://www.niuduxiu.com/m/static/img/bg.b755975.png" alt=""/>
                </div>
                <div className='chooseActivityStyle'>
                    <p className={this.state.style==='全部'?'active':''} onClick={this.getActivity.bind(this,'全部')}>全部</p>
                    <p className={this.state.style==='专题活动'?'active':''} onClick={this.getActivity.bind(this,'专题活动')}>专题活动</p>
                    <p className={this.state.style==='设计大赛'?'active':''} onClick={this.getActivity.bind(this,'设计大赛')}>设计大赛</p>
                </div>
                <div className='ActivityList'>
                    {
                        this.state.Zixun.map((item,index)=>{
                            return(
                                <div className='ActivityOne' key={index}>
                                    <img src={item.mCoverImage} alt=""/>
                                    <p>{item.title}</p>
                                </div>
                            )
                        })
                    }
                </div>
               <Dibu size={this.state.size}  total={ this.state.total} />
            </div>
        );
    }
}

export default Activity;
